<template>
  <div>
    <el-row>
      <el-dialog
        custom-class="approval-dialog-modal"
        title="选择审批人员"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
        :visible.sync="dialogVisible"
        width="80%">
        <el-row class="pur-order-dialog-tips">提示:请选择审批人，1到2人</el-row>
        <div class="approval-content">
          <span>{{approvalName}}(发起者) ——></span>
          <span v-for="(item,index) in approvalSelectArray" :key="index">
             <el-select
               style="margin-right: 5px"
               v-model="item.value"
               filterable
               clearable
               placeholder="请选择审批人">
          <el-option
            v-for="(opt ,index2) in item.userList"
            :key="index2"
            :label="opt.name"
            :value="opt.id">
          </el-option>
        </el-select>
        <el-icon v-if="index !== 0" class="el-icon-delete plus-icon-del"
                 @click.native.prevent="deleteOpt(index)"></el-icon>
            ——>
        </span>
          <el-icon class="el-icon-circle-plus-outline plus-icon-add" @click.native.prevent="addApproval"></el-icon>
        </div>
        <div slot="footer" class="dialog-footer" style="text-align: center">
          <el-button size="small" @click="closeApprovalDialog()">关闭</el-button>
          <el-button type="primary" size="small" @click="commitApproval()">确认</el-button>
        </div>
      </el-dialog>

    </el-row>
  </div>
</template>

<script>
  import {localStorage} from 'js/localStorage'
  export default {
    name: "Approval",
    props: {
      approvalName: '',
      dialogVisible: false,
    },
    data() {
      return {
        userList: [],
        approval: '',
        approvalSelectArray: [],
        initApprovalUserList:[],
      }
    },
    created(){
      console.log(this.approvalSelectArray,"$$$$$$$$$")
    },
    methods: {
      getUserList() {
        let success = data => {
          if (data.code === 'OK') {
            this. initApprovalUserList = data.data;
            this.buildUserList();
          } else {
            this.$message.error(data.msg)
          }
        };
        this.api.getApproveUserList({userId:localStorage.get("userID")}, success);
      }, buildUserList(){
        this.userList =  Object.assign({}, this.initApprovalUserList);;
        this.approvalSelectArray.push({
          value: '',
          userList: this.userList
        });
        let hash = {};
        this.approvalSelectArray = this.approvalSelectArray.reduce(function (pre, next) {
          hash[next.value] ? '' : hash[next.value] = true && pre.push(next);
          return pre
        }, []);

      },addApproval() {
        let len = this.approvalSelectArray.find(item => item.value === '');
        if (len) {
          this.tips.MessageModal('warning', '请选择审批人!');
          return;
        }
        if (this.approvalSelectArray.length < 2) {
          this.approvalSelectArray.push({
            value: '',
            userList: this.userList
          });
        } else {
          this.tips.MessageModal('warning', '至多选择2人审批!');
        }
      }, deleteOpt(index) {
        this.approvalSelectArray.splice(index, 1);
      }, commitApproval() {
        let len = this.approvalSelectArray.find(item => item.value === '');
        if (len) {
          this.tips.MessageModal('warning', '请选择审批人!');
          return;
        }
        let hash = {};
        let selectArray = Object.values(Object.assign({}, this.approvalSelectArray));
        selectArray = selectArray.reduce(function (pre, next) {
          hash[next.value] ? '' : hash[next.value] = true && pre.push(next);
          return pre
        }, []);
        if (selectArray.length < this.approvalSelectArray.length) {
          this.tips.MessageModal('warning', '审批人不能重复!');
          return;
        }
        if (selectArray.length === 1) {
          if (selectArray[0].value === '') {
            this.tips.MessageModal('warning', '请选择审批人!');
            return;
          }
        }
        let valueArray = [];
        this.approvalSelectArray.forEach(item => {
          valueArray.push(item.value);
        });
        this.$emit('commitApproval', valueArray);

      }, closeApprovalDialog() {
        this.approvalSelectArray = [{
          value: '',
          userList: this.userList
        }];
        this.$emit("closeApprovalDialog", true);
      }
    }, mounted() {
      this.getUserList();
    }, watch: {
      'dialogVisible': function (value) {
        if (value === false) {
          this.approvalSelectArray = [];
        }else{
          this.buildUserList();
        }
      }
    }
  }
</script>

<style type="less" scoped>
  .plus-icon-add {
    color: #67c23a;
    cursor: pointer;
    font-size: 16px
  }
  .approval-content {
    text-align: center;
  }
  .plus-icon-del {
    margin-right: 5px;
    color: #F1449D;
    cursor: pointer;
    font-size: 16px
  }
  .approval-dialog-modal {
    height: 450px !important;
  }
  .pur-order-dialog-tips {
    color: goldenrod;
    font-size: 12px;
    padding-left: 10px;
  }
</style>
